﻿/*
http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html
*/
angular.module("GrayParrot.AngularJS.Directives.DateTimePicker", []).directive('dalot', function ($parse) {
    return {
        restrict: "E",
        replace: true,
        transclude: false,
        controller: ['$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
                  var getter, setter, val;
                  val = $scope.options.defaultValue != null ? $scope.options.defaultValue : $attrs.initDate;
                  getter = $parse($attrs.ngModel);
                  setter = getter.assign;
                  setter($scope, val);
              }
        ],
        compile: function (element, attrs) {
            var modelAccessor = $parse(attrs.ngModel);
            var initDate = attrs.initDate;
            var m_invalidate = false;

            var html = "<input type='text' class='form-control date form_datetime' id='" + attrs.id + "' ></input>";

            var newElem = $(html);
            element.replaceWith(newElem);

            return function (scope, element, attrs, controller, $parse) {

                var withInitialDate = scope.to.withInitialDate || false;

                var processChange = function () {
                    var date = new Date(element.datetimepicker("getDate"));

                    scope.$apply(function (scope) {
                        // Change bound variable
                        if (m_invalidate) {
                            modelAccessor.assign(scope, null);
                            m_invalidate = false;
                        } else {
                            modelAccessor.assign(scope, date);
                        }
                    });

                    if (scope.to.onChange !== undefined) {
                        scope.to.onChange(scope.to, scope);
                    }
                };

                if (scope.to.showTimePanel) {
                    scope.to.minView = 0;
                }

                element.datetimepicker({
                    inline: true,
                    initDate: scope.to.initDate,
                    showMeridian: scope.to.showMeridian,
                    autoclose: scope.to.autoclose,
                    language: scope.to.language,
                    format: scope.to.format,
                    todayBtn: scope.to.todayBtn,
                    todayHighlight: scope.to.todayHighlight,
                    minuteStep: scope.to.minuteStep,
                    minView: scope.to.minView,
                    startView: scope.to.startView,
                    forceParse: 0
                }).on('changeDate', function (ev) {
                    processChange();
                }).on('keydown', function (ev) {

                    if ((ev.keyCode == 8) || (ev.keyCode == 46)) {
                        m_invalidate = true;
                    }
                    
                    processChange();
                });

                scope.$watch(modelAccessor, function (val) {
                    if (withInitialDate) {
                        if (val == null) {
                            val = initDate;
                        }

                        if (val !== "null") {
                            var date = new Date(val);

                            element.datetimepicker("setDate", date);
                        } else {
                            element.datetimepicker("setDate", null);
                        }
                    }
                });
            };

        }
    };
});